<script setup lang="ts">
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import {
  deliveryTimeMultiDateArray,
  deliveryTimeMultiHourArray,
  deliveryTimeMultiMinutsArray,
} from '@/utils/http'
import DiscountPanel from './components/DiscountPanel.vue'
import { getMemberAddressDefaultByUserIdAPI } from '@/services/address'

import { useOrder, useStore, useCart, useCategory, useAddressStore, useMemberStore } from '@/stores'
import type { IcartItem } from '@/types/cart'
import { formatChineseJson, parseCustomDateTime } from '@/utils/http'
import { createOrderAPI, expectOrderAPI, unifiedorderAPI } from '@/services/order'
import { Decimal } from 'decimal.js'
import { pageCouponAvaiableAPI } from '@/services/coupon'
import type { CouponsItem, ICouponPageParam } from '@/types/coupon'
import type { IOrder, IOrderItem, IUnifiedOrderParams } from '@/types/order'
const { getBuyMethodActiveIndex, setBuyMethodActiveIndex } = useCategory()
const { getAddress, changeSelectedAddress, getDeliveryPrice, setDeliveryPrice } = useAddressStore()
const { getUserInfo } = useMemberStore()

const { getOrderData } = useOrder()
const { successCartHandler } = useCart()
const { getStoreInfo } = useStore()

const delivery = ref([0, 1].includes(getBuyMethodActiveIndex()) ? 1 : 2) // 1, 2
const goodsList = ref(getOrderData() as IcartItem[])
const couponParams = ref({
  page: 1,
  limit: 10000,
  userId: getUserInfo()?.id,
  userStatus: 0,
} as ICouponPageParam)
const couponlist = ref([] as CouponsItem[])
const couponValue = ref(0)

const userCouponId = ref(0 as any)

// 共计件数
const goodsSum = computed(() => {
  return goodsList.value.reduce((sum, item) => {
    return sum + item.num
  }, 0)
})
// 总金额
const goodsTotal = computed(() => {
  return goodsList.value
    .reduce((total, item) => {
      return new Decimal(total).plus(new Decimal(item.price).times(item.num))
    }, new Decimal(0))
    .toNumber()
})
// 最终金额
const finalTotal = computed(() => {
  const total = new Decimal(goodsTotal.value)
  const coupon = new Decimal(couponValue.value)
  const deliveryPriceValue = new Decimal(getDeliveryPrice())
  return total
    .minus(coupon)
    .plus(deliveryPriceValue)
    .toDecimalPlaces(2, Decimal.ROUND_HALF_UP)
    .toNumber()
})

const radioList = ref([
  { name: '到店', value: 0, checked: [0, 1].includes(getBuyMethodActiveIndex()) }, // 0; 堂食，1：外带
  { name: '配送', value: 2, checked: [2].includes(getBuyMethodActiveIndex()) },
])
const mealRadioList = ref([
  { name: '店内就餐', value: 0, checked: [0].includes(getBuyMethodActiveIndex()) },
  { name: '打包带走', value: 1, checked: [1].includes(getBuyMethodActiveIndex()) },
])

const getAddressInfo = async () => {
  const res = await getMemberAddressDefaultByUserIdAPI({ userId: getUserInfo()?.id })
  changeSelectedAddress(res.data)

  // 请求并计算费用
  expectOrderCost()
}

const getCouponList = async () => {
  const res = await pageCouponAvaiableAPI(couponParams.value)
  couponlist.value = res.data.list.map((item) => ({ ...item, selected: false }))
}
onLoad(() => {
  getAddressInfo()
  getCouponList()
})
const radioChange = (val: any) => {
  delivery.value = val.value
  radioList.value = radioList.value.map((item: any) => {
    item.checked = false
    if (item.value === val.value) {
      item.checked = true
      setBuyMethodActiveIndex(val.value)
      delivery.value = [0, 1].includes(getBuyMethodActiveIndex()) ? 1 : 2
    }
    return item
  })
  mealRadioList.value = mealRadioList.value.map((item: any) => {
    item.checked = false
    if (item.value === 0) {
      item.checked = true
    }
    return item
  })

  if (!getDeliveryPrice()) {
    expectOrderCost()
  }
}

const textareaValue = ref('')
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
const popupName = ref<'deliverytime' | 'discount'>()
const openPopup = (name: typeof popupName.value) => {
  // 修改弹出层名称
  popupName.value = name
  // 打开弹出层
  popup.value?.open()
}
const textareaHandler = (e: any) => {
  console.log(e.detail.value)
  textareaValue.value = e.detail.value
}

const multiArray = ref([
  deliveryTimeMultiDateArray(),
  deliveryTimeMultiHourArray(0),
  deliveryTimeMultiMinutsArray(0),
])
const multiIndex = ref([0, 0, 0])
const bindMultiPickerColumnChange = (e: any) => {
  multiIndex.value[e.detail.column] = e.detail.value
  if (e.detail.column === 0) {
    if (e.detail.value === 0) {
      multiArray.value[1] = deliveryTimeMultiHourArray(0)
      multiArray.value[2] = deliveryTimeMultiMinutsArray(0)
    } else {
      multiArray.value[1] = deliveryTimeMultiHourArray(null)
      multiArray.value[2] = deliveryTimeMultiMinutsArray(null)
    }
  }
}
const onCancel = (e: any) => {
  console.log('picker cancel发送取消事件', e)
}

const couponTip: any = ref('暂无优惠')

const getCouponTip = (val: CouponsItem) => {
  // 优惠券类型：1:满减券, 2:折扣券, 3:无门槛券
  if (val.couponType === 1) {
    if (goodsTotal.value >= val.minAmount) {
      couponValue.value = val.amount
      couponTip.value = `满${val.minAmount}减${val.amount}`
      return val.couponName
    }
  } else if (val.couponType === 2) {
    if (goodsTotal.value >= val.minAmount) {
      couponValue.value = new Decimal(goodsTotal.value)
        .times(new Decimal(1).minus(val.discountRate))
        .toDecimalPlaces(2, Decimal.ROUND_HALF_UP)
        .toNumber()
      couponTip.value = `满${val.minAmount}打${val.discountRate * 10}折`
      return val.couponName
    }
  } else if (val.couponType === 3) {
    couponValue.value = val.amount
    couponTip.value = `无门槛优惠￥${val.amount}`
    return val.couponName
  } else {
    couponValue.value = 0
    return ''
  }
}
const onDiscountChange = (val: CouponsItem) => {
  // 用户优惠券id
  userCouponId.value = val.userCouponId
  couponlist.value = couponlist.value.map((item: CouponsItem) => {
    return item.userCouponId === val.userCouponId
      ? {
          ...item,
          selected: !item.selected,
        }
      : {
          ...item,
          selected: false,
        }
  })

  // 都没有选择还原
  const allUnselected: boolean = couponlist.value.every((item: CouponsItem) => !item.selected)

  if (allUnselected) {
    couponValue.value = 0
    userCouponId.value = null
    couponTip.value = '暂无优惠'
    return
  }

  const tip = getCouponTip(val)
  if (!tip) {
    userCouponId.value = null
    couponTip.value = '没有达到优惠券的满足条件'
    uni.showToast({
      title: couponTip.value,
      icon: 'none',
    })
  }

  console.log(userCouponId.value)
}

const paymentHander = async () => {
  const deliveryTime: string = parseCustomDateTime(
    multiArray.value[0][multiIndex.value[0]] +
      multiArray.value[1][multiIndex.value[1]] +
      multiArray.value[2][multiIndex.value[2]],
  )

  const orderItems: IOrderItem[] = []
  const orderItemConvert = (item: IcartItem): IOrderItem => {
    return {
      goodsId: item.goods_id as number,
      storeId: item.storeId,
      goodsName: item.name as string,
      skuId: item.skuId,
      specification: item.specification,
      quantity: item.num,
      price: item.price,
      subtotal: item.num * item.price,
      isSetmeal: item.isSetmeal,
      setmealPid: item.setmealPid as number,
      hasSku: item.hasSku ? 1 : 0,
      cost: item.costPrice,
      description: item.description as string,
      image: item.image,
      subList: [],
      setmealGroupType: null,
    }
  }
  goodsList.value.forEach((item: IcartItem, index: number) => {
    orderItems.push({
      ...orderItemConvert(item),
      setmealGroupType: item.isSetmeal === 1 ? index : null,
    })
    if (item.subList && item.subList.length > 0) {
      orderItems.push(
        ...item.subList.map((sitem: IcartItem) => {
          return {
            ...orderItemConvert(sitem),
            setmealGroupType: item.isSetmeal === 1 ? index : null,
          }
        }),
      )
    }
  })

  const deliveryRecord: any = [0, 1].includes(getBuyMethodActiveIndex())
    ? {}
    : {
        deliveryTime,
        deliveryName: getAddress()?.receiver,
        deliveryPhone: getAddress()?.contact,
        deliveryAddress: getAddress().fulllocation + getAddress().address,
      }

  const orderRecord: IOrder = {
    userId: getUserInfo()?.id,
    ...deliveryRecord,
    eatType: getBuyMethodActiveIndex(),
    paymentStatus: 0, // 支付状态：0:未支付, 1:已支付, 2:支付失败, 3:退款中, 4:已退款
    orderStatus: 0, // 订单状态：0:待支付, 1:已下单, 2:配送中, 3:已完成, 4:已取消
    totalAmount: goodsTotal.value,
    discountAmount: couponValue.value,
    finalAmount: finalTotal.value,
    remark: textareaValue.value,
    orderItemsList: orderItems,
    userCouponId: userCouponId.value,
  }

  const orderCreateRes = await createOrderAPI(orderRecord)
  // 清空购物车
  successCartHandler()
  uni.navigateTo({
    url: `/pagesOrder/payment/payment?orderId=${orderCreateRes.data.id}&orderPaymentId=${orderCreateRes.data.orderPaymentId}`,
  })
}

// 路线费用
const expectOrderCost = async () => {
  if (delivery.value === 1) {
    return
  }
  // 门店经纬度
  const storeInfo: any = getStoreInfo()
  const startPointLongitude = storeInfo.longitude
  const startPointLatitude = storeInfo.latitude
  // 配送地址经纬度
  const address: any = getAddress()
  const endPointLongitude = address.longitude
  const endPointLatitude = address.latitude

  const expectOrderRes = await expectOrderAPI({
    startPointLatitude,
    startPointLongitude,
    endPointLatitude,
    endPointLongitude,
  })
  setDeliveryPrice(expectOrderRes.data.feeRuleResponseVo.totalAmount)
}
const mealRadioCLick = (item: any) => {
  mealRadioList.value = mealRadioList.value.map((val: any) => {
    val.checked = false
    if (val.value === item.value) {
      val.checked = true
      setBuyMethodActiveIndex(val.value)
    }
    return val
  })
}
const showAddressPopup = () => {
  uni.navigateTo({
    url: '/pagesMember/address/address?delivery=1',
  })
}
</script>

<template>
  <view class="create-order-page">
    <scroll-view class="create-order" scroll-y>
      <view class="create-content">
        <!-- 店内还是配送 -->
        <view class="order-radio-group">
          <view
            @click="radioChange(item)"
            class="left"
            :class="{ active: item.checked }"
            v-for="(item, index) in radioList"
            :key="index"
            ><text>{{ item.name }}</text></view
          >
        </view>
        <!-- 店内地址 -->
        <view class="address" v-if="delivery === 1">
          <view class="icon"><text class="iconfont icon-address"></text></view>
          <view class="meta">
            <text class="title">百分百蛋糕面包坊</text>
            <text class="con">江苏省淮安市涟水县万通商场南大门西侧百分百蛋糕面包坊</text>
          </view>
        </view>
        <view class="address" v-else @click="showAddressPopup">
          <view class="icon"><text class="iconfont icon-address"></text></view>
          <view class="meta">
            <text class="title">{{ getAddress()?.receiver }}</text>
            <text class="con">{{ getAddress()?.fulllocation }} {{ getAddress()?.address }}</text>
          </view>
          <text class="iconfont icon-jinru"></text>
        </view>

        <!-- 店内选项 -->
        <view class="meal-radio-group" v-if="delivery === 1">
          <view
            class="content"
            :class="{ active: item.checked }"
            v-for="(item, index) in mealRadioList"
            :key="index"
            @click="mealRadioCLick(item)"
          >
            <text
              class="iconfont"
              :class="[index === 1 ? 'icon-xiuxianqu' : 'icon-shopping']"
            ></text>
            <text class="name">{{ item.name }}</text>
          </view>
        </view>

        <!-- 配送方式 -->
        <view class="delivery-method delivery-item" v-if="delivery === 2">
          <view class="title"
            ><text class="iconfont icon-RectangleCopy14"></text><text>配送方式</text></view
          >
          <view class="info">
            <text class="text">同城配送</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>

        <!-- 配送时间 -->
        <picker
          mode="multiSelector"
          @columnchange="bindMultiPickerColumnChange"
          @cancel="onCancel"
          :value="multiIndex"
          :range="multiArray"
          v-if="delivery === 2"
        >
          <view class="delivery-time delivery-item">
            <view class="title"
              ><text class="iconfont icon-RectangleCopy13"></text><text>配送时间</text></view
            >
            <view class="info">
              <text class="text"
                >{{ multiArray[0][multiIndex[0]] }}{{ multiArray[1][multiIndex[1]]
                }}{{ multiArray[2][multiIndex[2]] }}</text
              >
              <text class="iconfont icon-jinru"></text>
            </view>
          </view>
        </picker>
        <!-- 订单列表 -->
        <view class="order-content-list">
          <navigator
            :url="`/pages/goods/goods?id=${2}`"
            hover-class="none"
            class="order-content-item"
            v-for="(item, index) in goodsList"
            :key="index"
          >
            <image class="left" :src="item.image" mode="scaleToFill" />
            <view class="center">
              <text class="name">{{ item.name }}</text>
              <rich-text class="spec" :nodes="item.description || ''"></rich-text>
              <rich-text
                class="spec"
                v-if="item.specification"
                :nodes="formatChineseJson(item.specification)"
              ></rich-text>
            </view>
            <view class="right">
              <text class="price">{{ item.price }}</text>
              <text class="num">x{{ item.num }}</text>
            </view>
          </navigator>
        </view>
        <!-- 优惠券 -->
        <view class="shop-discount" @tap="openPopup('discount')">
          <view class="title"><text>优惠券</text></view>
          <view class="discount-info">
            <text class="discount-text" v-if="couponValue">{{ couponTip }}</text>
            <text class="discount-text default" v-else>{{ couponlist.length }}张可用</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>

        <uni-popup ref="popup" type="bottom" background-color="#fff">
          <DiscountPanel
            v-if="popupName === 'discount'"
            :couponlist="couponlist"
            @close="popup?.close()"
            @onChange="onDiscountChange"
          />
        </uni-popup>
        <!-- 备注 -->
        <view class="buyer-note">
          <text class="title">备注</text>
          <textarea
            class="note-input"
            :maxlength="200"
            auto-height
            placeholder-style="{ color: '#9CA3AF' }"
            placeholder="给商家留言(选填)"
            @input="textareaHandler"
            v-model="textareaValue"
          ></textarea>
        </view>

        <view class="order-summary">
          <view class="summary-item">
            <text class="label">共{{ goodsSum }}件</text>
            <text class="value">小计：￥{{ goodsTotal }}</text>
          </view>
          <view class="summary-item">
            <text class="label">优惠：</text>
            <text class="value" v-if="couponValue">-{{ couponValue }}</text>
            <text class="value" v-else>{{ couponTip }}</text>
          </view>
          <view class="summary-item" v-if="delivery === 2">
            <text class="label">配送费：</text>
            <text class="value">+{{ getDeliveryPrice() }}</text>
          </view>
          <view class="summary-item">
            <text class="label">应付：</text>
            <text class="value">￥{{ finalTotal }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="create-order-bar">
      <view class="left">
        <text class="total"
          >合计：<text class="price">￥{{ finalTotal }}</text
          >(共{{ goodsSum }}件)</text
        >
        <text class="discount" v-if="couponValue">已优惠金额 ¥{{ couponValue }}</text>
        <text class="discount" v-else>{{ couponTip }}</text>
      </view>
      <view class="right">
        <view class="btn" @tap="paymentHander">{{ delivery === 1 ? '去支付' : '去结算' }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import '@/styles/variables.scss';
page {
  height: 100%;
  overflow: hidden;
  background-color: $background-color;
}
.create-order-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  .create-order {
    .create-content {
      padding: 0 $medium-padding;
      padding-bottom: 50rpx;
      .order-radio-group {
        display: flex;
        overflow: hidden;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        height: 80rpx;
        width: 300rpx;
        background-color: #fff;
        border-radius: 40rpx;
        margin: 30rpx;
        border: 1px solid $color;
        .left,
        .right {
          flex: 1;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: $font-medium-size;
          color: $font-color;
          position: relative;
          text {
            position: absolute;
          }
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: $color;
            border-radius: 48rpx;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
            // transition: all 0.4s;
          }

          &.active {
            color: #fff;
            &::before {
              opacity: 1;
              transform: scale(1);
            }
          }
        }
      }

      .address {
        border-radius: $border-medium-radius;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 32rpx 10rpx 32rpx 32rpx;
        align-items: center;

        .icon-jinru {
          color: #9ca3af;
        }

        .icon {
          margin-bottom: auto;
          padding-right: 30rpx;
          .iconfont {
            font-size: 50rpx;
            color: $font-color;
          }
        }

        .meta {
          flex: 1;
          display: flex;
          flex-direction: column;

          .title {
            font-size: $font-medium-size;
            font-weight: $font-medium-weight;
            color: $good-font-title-color;
            margin-bottom: 10rpx;
          }

          .con {
            font-size: $font-size;
            color: $font-color;
          }
        }
      }

      .meal-radio-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 30rpx 0;
        gap: 20rpx;
        .content {
          overflow: hidden;
          border: 1px solid #e5e7eb;
          background-color: #fff;
          height: 120rpx;
          border-radius: $border-medium-radius;

          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20rpx;
          flex: 1;

          .iconfont {
            font-size: 40rpx;
            color: #4b5563;
            margin-right: 20rpx;
          }

          .name {
            font-size: $font-medium-size;
            color: $good-font-title-color;
          }

          &.active {
            border-color: $color;
            background-color: #fff;
            color: $color;
            .iconfont {
              color: $color;
            }
            .name {
              color: $color;
            }

            position: relative;
            &::before {
              position: absolute;
              right: -50rpx;
              bottom: -50rpx;
              content: '';
              width: 0;
              height: 0;
              border-top: 50rpx solid transparent;
              border-bottom: 50rpx solid transparent;
              border-left: 100rpx solid $color; /* 左边框颜色 */
              transform-origin: center;

              /* 应用旋转变换 */
              transform: rotate(45deg);
            }

            &::after {
              position: absolute;
              right: 0;
              bottom: 0;
              content: '\eb70';
              font-family: 'iconfont' !important;
              font-size: 40rpx;
              color: #fff;
              z-index: 1;
            }
          }
        }
      }

      .order-content-list {
        .order-content-item {
          display: flex;
          align-items: center;
          padding: 20rpx;
          background-color: #fff;
          border-radius: $border-medium-radius;
          margin-bottom: 30rpx;

          .left {
            width: 160rpx;
            height: 160rpx;
            border-radius: $border-small-radius;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .center {
            flex: 1;
            margin-left: 32rpx;
            display: flex;
            flex-direction: column;

            .name {
              font-size: $font-medium-size;
              color: $good-font-title-color;
              font-weight: $font-medium-weight;
              margin-bottom: 10rpx;
            }

            .spec {
              font-size: $font-size;
              color: $good-font-con-color;
              font-weight: $font-regular-weight;
            }
          }

          .right {
            text-align: right;
            display: flex;
            flex-direction: column;

            .price {
              font-size: $font-medium-size;
              color: $good-font-title-color;
              font-weight: $font-medium-weight;
              margin-bottom: 10rpx;
            }

            .num {
              font-size: $font-size;
              color: $good-font-con-color;
              font-weight: $font-regular-weight;
            }
          }
        }
      }

      .shop-discount {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 10rpx 32rpx 32rpx;
        background-color: #fff;
        border-radius: $border-medium-radius;
        margin-bottom: 30rpx;

        .title {
          font-size: $font-medium-size;
          color: $good-font-title-color;
          font-weight: $font-weight;
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 50rpx;
            color: $font-color;
            margin-right: 30rpx;
          }
        }

        .discount-info {
          display: flex;
          align-items: center;

          .discount-text {
            font-size: $font-medium-size;
            color: $color;
            margin-right: 10rpx;
            &.default {
              color: #ff4d4f;
            }
          }

          .iconfont {
            color: $font-color;
            font-size: 40rpx;
          }
        }
      }
      .delivery-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 10rpx 32rpx 32rpx;
        background-color: #fff;
        border-radius: $border-medium-radius;
        margin-bottom: 30rpx;

        .title {
          font-size: $font-medium-size;
          color: $good-font-title-color;
          font-weight: $font-weight;
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 50rpx;
            color: #4b5563;
            margin-right: 30rpx;
          }
        }

        .info {
          display: flex;
          align-items: center;

          .text {
            font-size: $font-medium-size;
            color: $font-color;
            margin-right: 10rpx;
          }

          .iconfont {
            color: #9ca3af;
            font-size: 40rpx;
          }
        }
      }

      .buyer-note {
        display: flex;
        flex-direction: column;
        padding: 32rpx;
        background-color: #fff;
        border-radius: $border-medium-radius;
        margin-bottom: 32rpx;
        .title {
          font-size: $font-medium-size;
          color: $good-font-title-color;
          font-weight: $font-weight;
          margin-bottom: 32rpx;
        }
        .note-input {
          font-size: $font-medium-size;
          color: $good-font-title-color;
          font-weight: $font-regular-weight;
          width: auto;
          // min-height: 100rpx;
          background-color: #f9fafb;
          border-radius: 16rpx;
          padding: 20rpx;
        }
      }

      .order-summary {
        display: flex;
        flex-direction: column;
        padding: 32rpx;
        background-color: #fff;
        border-radius: $border-medium-radius;
        margin-bottom: 32rpx;

        .summary-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;

          .label {
            font-size: $font-medium-size;
            color: $font-color;
            font-weight: $font-weight;
          }

          .value {
            font-size: $font-medium-size;
            color: $good-font-title-color;
            font-weight: $font-weight;
          }
        }
      }
    }
  }
  .create-order-bar {
    background-color: #fff;
    padding: 0 $medium-padding;
    height: 160rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 20rpx;
      .total {
        font-size: $font-medium-size;
        color: $good-font-title-color;
        font-weight: $font-weight;
        .price {
          color: $price-font-color;
          font-weight: $font-medium-weight;
        }
      }
      .discount {
        margin-top: 10rpx;
        font-size: $font-size;
        color: $price-font-color;
        font-weight: $font-weight;
      }
    }
    .right {
      .btn {
        background-color: $color;
        color: #fff;
        font-size: $font-medium-size;
        font-weight: $font-medium-weight;
        padding: 0 50rpx;
        line-height: 96rpx;
        border-radius: 48rpx;
      }
    }
  }
}
.crate-order {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
